<template>
    <div class="home-view">
        <!-- 顶部导航 -->
        <el-header class="header">
            <div class="logo">AI绘画工具</div>
            <div class="nav">
                <el-button type="primary" @click="$router.push('/tmp')">进入工作台</el-button>
            </div>
        </el-header>

        <!-- 主要内容区 -->
        <div class="main-content">
            <!-- 标签筛选 -->
            <div class="filter-tags">
                <el-radio-group v-model="activeTag" size="large">
                    <el-radio-button label="全部">全部</el-radio-button>
                    <el-radio-button label="Flux">Flux</el-radio-button>
                    <el-radio-button label="SDXL">SDXL</el-radio-button>
                    <el-radio-button label="室内设计">室内设计</el-radio-button>
                </el-radio-group>
            </div>

            <!-- 模板卡片网格 -->
            <div class="template-grid">
                <template-card
                    v-for="template in filteredTemplates"
                    :key="template.id"
                    :template="template"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TemplateCard from '@/components/templates/TemplateCard.vue'

const activeTag = ref('全部')

// 模拟模板数据
const templates = [
    {
        id: 1,
        title: '最新版魔法Flux',
        description: '科技感魔法风格',
        image: '/images/flux1.jpg',
        tags: ['Flux'],
        author: '可爱的管理员'
    },
    {
        id: 2,
        title: 'Flux',
        description: '科幻感强的打造第一!',
        image: '/images/flux2.jpg',
        tags: ['Flux'],
        author: '可爱的管理员'
    },
    {
        id: 3,
        title: 'Flux低生温-美颜写实',
        description: '写实风格人像',
        image: '/images/flux3.jpg',
        tags: ['Flux'],
        author: '可爱的管理员'
    },
    {
        id: 4,
        title: '室内设计',
        description: '现代简约室内设计风格',
        image: '/images/interior1.jpg',
        tags: ['室内设计'],
        author: '可爱的管理员'
    },
    {
        id: 5,
        title: 'SDXL写实',
        description: '高质量写实风格',
        image: '/images/sdxl1.jpg',
        tags: ['SDXL'],
        author: '可爱的管理员'
    }
]

const filteredTemplates = computed(() => {
    if (activeTag.value === '全部') return templates
    return templates.filter(template => template.tags.includes(activeTag.value))
})
</script>

<style scoped>
.home-view {
    min-height: 100vh;
    background-color: #f5f7fa;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo {
    font-size: 20px;
    font-weight: bold;
    color: #409eff;
}

.main-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.filter-tags {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

:deep(.el-radio-button__inner) {
    border-radius: 20px;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-radius: 20px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
    border-radius: 20px;
}
</style> 